eslint总结

1、初始命令

eslint初始命令如下:

(1) eslint --init： 生成.eslintrc.js文件
(2) eslint src --fix: 自动修复错误。但是只能修复基础的不影响代码逻辑的错误。其他像no-unused-vars这种错误只能手动修改

2、常用属性

eslint的常用属性： env、extends、parserOptions、plugins、rules等。

parserOptions
EsLint通过parserOptions，允许指定校验的ecma的版本，及ecma的一些特性

"parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },

parser
指定解析器
EsLint默认使用esprima做脚本解析，在使用es6代码中，需要改成babel-eslint。
babel-eslint 解析器是一种使用频率很高的解析器，因为现在很多公司的很多项目目前都使用了es6，为了兼容性考虑基本都使用babel插件对代码进行编译。而用babel编译后的代码使用 babel-eslint 这款解析器可以避免不必要的麻烦。
babel-eslint 安装命令：

npm install --save-dev babel-eslint

在 .eslintrc.js 配置文件中添加如下配置项代码：

parser: 'babel-eslint',

env
Environment可以预设好的其他环境的全局变量，如brower、node环境变量、es6环境变量、mocha环境变量等

"env": {
        "browser": true,
        "node": true
    }

如果想使用插件中的环境变量，你可以使用plugins指定：

{
      "plugins": ["example"],
      "env": {
          "example/custom": true
      }
  }

plugins
用来引用第三方插件

"plugins": [
        "plugin1",
        "eslint-plugin-plugin2"
    ]

rules:
设置具体的配置。第一个是错误级别：
"off" or 0 - 关闭规则
"warn" or 1 - 将规则视为一个警告（不会影响退出码）
"error" or 2 - 将规则视为一个错误 (退出码为1)

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

extends
可以从基础配置中继承已启用的规则。eslint官方提供了3种预安装包：
（1）eslint-config-google

npm install eslint eslint-config-google

(2)eslint-config-airbnb
Airbnb标准,它依赖eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y等插件。
执行以下命令查看所依赖的各个版本：

npm info "eslint-config-airbnb@latest" peerDependencies

知道依赖后，安装依赖包。
eslint-config-airbnb-base 包含了针对 ES6+ 代码的检查
eslint-config-airbnb 在 eslint-config-airbnb-base 的基础上增加了对 react 和 jsx 语法的检查。

（3）eslint-config-standard

"extends": "standard",

global
指定全局变量。true代表允许重写、false代表不允许重写

"globals": {
  "var1": true,
  "var2": false
}

3、代码间的使用

eslint的注释
可以在代码间加注释，设置是否启用eslint

var a = 1; //eslint-disable-line 设置该行不启用

//eslint-disable-next-line 设置下行不启用
var a = 1

/* eslint-disable */
...
/* eslint-enable */
设置代码段不启用

4、发布自己的配置

eslint允许发布自己设定的配置。被引用进来即可使用。
（1）my-config.js

module.exports = {
    extends: 'eslint:recommended',
    env: {
        node: true,
        es6: true
    },
    rules: {
        'no-console': 'off',
        'indent': [ 'error', 4 ],
        'quotes': [ 'error', 'single' ]
    }
};

(2) package.json

{
    "name": "eslint-config-my",
    "version": "0.0.1",
    "main":"my-config.js"
}

为了能让 eslint 正确载入这个模块，我们需要执行 npm link 将这个模块链接到本地全局位置：

npm link eslint-config-my

然后将文件 .eslintrc.js 改成：

module.exports = {
    extends: 'my', //在 extends 中， eslint-config-my 可简写为 my
}; 

代码说明

module.exports = {
// 默认情况下，ESLint会在所有父级组件中寻找配置文件，一直到根目录。ESLint一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
  root: true,
// 对Babel解析器的包装使其与 ESLint 兼容。
  parser: 'babel-eslint',
  parserOptions: {
    // 代码是 ECMAScript 模块
    sourceType: 'module'
  },
  env: {
    // 预定义的全局变量，这里是浏览器环境
    browser: true,
  },
// 扩展一个流行的风格指南，即 eslint-config-standard 
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
// required to lint *.vue files
  plugins: [
    // 此插件用来识别.html 和 .vue文件中的js代码
    'html',
    // standard风格的依赖包
    "standard",
    // standard风格的依赖包
    "promise"
  ],
// add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

常用插件

1、eslint-friendly-formatter 可以让eslint的错误信息出现在终端上
通过webpack配置使用如下：

{
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter')
  }
},

2、eslint-plugin-html
这个插件将会提醒模块脚本之间模拟浏览器共享全局变量的行为，因为这不适用于模块脚本。

这个插件也可以扩展文件，如：.vue，.jsx

.eslintrc.js中，添加如下配置项：

settings: {
  'html/html-extensions': ['.html', '.vue'],
  'html/indent': '+2',
},

而对于这种用 eslint-pulgin-html 扩展的的文件我们可以使用 eslint --ext .html,.vue src 进行检测，如果想要在开发中边写边检测，我们可以使用相应文件的loader进行处理。然后执行 npm run dev 就可以实现的功能。边写边检测的功能。